<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>会员管理</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="../css/bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        .table td{
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<%@include file="../resources/nav.jsp"%>
<div class="container-fluid" style="margin-top: 100px;">
    <!-- 看板 -->
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <div class="row">
                <div class="col-md-5">
                    <div class="card">
                        <div class="card-header bg-light text-center">
                            用户占比分析
                        </div>
                        <div class="card-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5><span style="font-size: 16px;" class="label label-success">用户来源分布</span>
                                    </h5>
                                </div>
                                <div class="ibox-content">
                                    <div class="echarts" id="userAddressPie" style="height: 300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="card">
                        <div class="card-header bg-light text-center">
                            用户占比分析
                        </div>
                        <div class="card-body">
                            <div class="ibox float-e-margins">
                                <div class="ibox-title">
                                    <h5><span style="font-size: 16px;"
                                              class="label label-success">用户访问量趋势</span></h5>
                                </div>
                                <div class="ibox-content">
                                    <div id='lineChart' style="height:300px;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 按钮组 -->
    <div class="row" style="margin-top: 20px;">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <button id="btn_delChecked" class="btn btn-outline-danger btn-sm" ><i class="fa fa-trash-o"></i> 删除</button>
            <a href="${pageContext.request.contextPath}/user/Add.jsp" class="btn btn-outline-success btn-sm"><i class="fa fa-user-plus"></i> 添加</a>
            <a href="${pageContext.request.contextPath}/user/Export.jsp" class="btn btn-outline-success btn-sm"><i class="fa fa-file-excel-o"></i> 导出</a>
        </div>
        <div class="col-md-1"></div>
    </div>
    <!-- 看板 -->

    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
            <table id="tb_user" class="table table-bordered table-hover table-sm">
                <thead>
                <tr class="bg-light text-center">
                    <th><input type="checkbox" name="id"  id="ckids"></th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>手机</th>
                    <th>邮箱</th>
                    <th>地址</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="u" items="${requestScope.page1.list}">
                    <tr>
                        <td class="text-center">
                            <input type="checkbox" name="ids" value="${u.id}">
                        </td>
                        <td>${u.username}</td>
<%--                        <td>
                            <fmt:formatDate value="${u.birth}" pattern="yyyy-MM-dd"/>
                        </td>--%>
                        <td>${u.age}</td>
                        <td>${u.mobile}</td>
                        <td>${u.email}</td>
                        <td>${u.address}</td>
                        <td>
                            <c:choose>
                                <c:when test="${u.status == 0}">
                                    <span class="badge badge-danger">冻结</span>
                                </c:when>
                                <c:otherwise>
                                    <span class="badge badge-success">激活</span>
                                </c:otherwise>
                            </c:choose>

                        </td>
                        <td>
                            <a class="btn btn-sm btn-outline-danger" href="${pageContext.request.contextPath}/user/findById?id=${u.id}"><i class="fa fa-trash-o"></i>删除</a>

                            <c:choose>
                                <c:when test="${u.status == 0}">
                                    <a class="btn btn-sm btn-outline-success" href="/Mall/user/status?id=${u.id}"><i class="fa fa-edit"></i>激活</a>
                                </c:when>
                                <c:otherwise>
                                    <a class="btn btn-sm btn-outline-warning" href="/Mall/user/status?id=${u.id}"><i class="fa fa-edit"></i>冻结</a>
                                </c:otherwise>
                            </c:choose>
                            <a class="btn btn-sm btn-outline-success" href="${pageContext.request.contextPath}/user/info?id=${u.id}"><i class="fa fa-info"></i>查看</a>
                            <%--<a class="btn btn-sm btn-outline-success" href="/Mall/cart/userList?id=${u.id}" onclick="checkCart(${u.id})"><i class="fa fa-info"></i> 购物车</a>--%>

                        </td>
                    </tr>
                </c:forEach>

                </tbody>
            </table>
        </div>
        <div class="col-md-1"></div>


    </div>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6" style="text-align: center">
            <c:choose>
                <c:when test="${requestScope.page1.pageNum<=1}">
                    <a class="btn btn-outline-primary" href="#" onclick="return false;">上一页</a>
                </c:when>
                <c:otherwise>
                    <a class="btn btn-outline-primary" href="/Mall/user/page?pageNum=${requestScope.page1.pageNum-1}&pageSize=${requestScope.page1.pageSize}">上一页</a>
                </c:otherwise>
            </c:choose>
<%--            <span>--%>
<%--				&nbsp;&nbsp;第 ${requestScope.page1.pageNum} 页&nbsp;&nbsp;--%>
<%--			</span>--%>
            <c:choose>
                <c:when test="${requestScope.page1.pageTotal<=5}">
                    <%--循环输出这些页码--%>
                    <c:forEach begin="1" end="${requestScope.page1.pageTotal}" var="i">
                        <%--如果是当前页面，则显示【当前页码】--%>
                        <c:if test="${i == requestScope.page1.pageNum}">
                            【${i}】
                        </c:if>
                        <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                        <c:if test="${i != requestScope.page1.pageNum}">
                            <a href="/Mall/user/page?pageNum=${i}&pageSize=${requestScope.page1.pageSize}">${i}</a>
                        </c:if>
                    </c:forEach>

                </c:when>
                <c:when test="${requestScope.page1.pageTotal>5}">
                    <c:choose>
                        <%--页码在前三，显示1-5--%>
                        <c:when test="${requestScope.page1.pageNum<=3}">
                            <c:forEach begin="1" end="5" var="i">
                                <%--如果是当前页面，则显示【当前页码】--%>
                                <c:if test="${i == requestScope.page1.pageNum}">
                                    【${i}】
                                </c:if>
                                <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                                <c:if test="${i != requestScope.page1.pageNum}">
                                    <a href="/Mall/user/page?pageNum=${i}&pageSize=${requestScope.page1.pageSize}">${i}</a>
                                </c:if>
                            </c:forEach>
                        </c:when>

                        <%--页码在后三，显示(Total-4)-Total--%>
                        <c:when test="${requestScope.page1.pageNum > requestScope.page1.pageTotal-3}">
                            <c:forEach begin="${requestScope.page1.pageTotal-4}" end="${requestScope.page1.pageTotal}" var="i">
                                <%--如果是当前页面，则显示【当前页码】--%>
                                <c:if test="${i == requestScope.page1.pageNum}">
                                    【${i}】
                                </c:if>
                                <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                                <c:if test="${i != requestScope.page1.pageNum}">
                                    <a href="/Mall/user/page?pageNum=${i}&pageSize=${requestScope.page1.pageSize}">${i}</a>
                                </c:if>
                            </c:forEach>

                        </c:when>

                        <%--其余其他情况，显示（当前页码-2）-（当前页码+2）--%>
                        <c:otherwise>
                            <c:forEach begin="${requestScope.page1.pageNum-2}" end="${requestScope.page1.pageNum+2}" var="i">
                                <%--如果是当前页面，则显示【当前页码】--%>
                                <c:if test="${i == requestScope.page1.pageNum}">
                                    【${i}】
                                </c:if>
                                <%--如果不是当前页码则直接显示数字，并加上超链接实现可以跳转的功能--%>
                                <c:if test="${i != requestScope.page1.pageNum}">
                                    <a href="/Mall/user/page?pageNum=${i}&pageSize=${requestScope.page1.pageSize}">${i}</a>
                                </c:if>
                            </c:forEach>
                        </c:otherwise>
                    </c:choose>

                </c:when>
            </c:choose>
            <c:choose>
                <c:when test="${requestScope.page1.isLastPage}">
                    <a class="btn btn-outline-primary" href="#" onclick="return false;">下一页</a>
                </c:when>
                <c:otherwise>
                    <a class="btn btn-outline-primary" href="/Mall/user/page?pageNum=${requestScope.page1.pageNum+1}&pageSize=${requestScope.page1.pageSize}">下一页</a>
                </c:otherwise>
            </c:choose>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
</body>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/echarts.min.js"></script><br />

<script>
    $(function () {
        // 会员全选
        $('#ckids').click(function () {
            if ($('#tb_user>thead :checkbox').prop('checked')) {
                $('#tb_user>tbody :checkbox').prop('checked', true);
            } else {
                $('#tb_user>tbody :checkbox').prop('checked', false);
            }
        });

        //批量删除
        $('#btn_delChecked').click(function () {
            if ($('#tb_user>tbody :checked').size() < 1) {
                return false;
            }
            let path = '${pageContext.request.contextPath}/user/remove?';
            $('#tb_user>tbody :checked').each(function () {
                console.log($(this));
                path = path + "id=" + $(this).val() + "&";
            });
            console.log(path);
            location.href = path;

        });


    })


    function checkCart(userId) {
        $.ajax({
            url: '/Mall/cart/count',
            method: 'GET',
            data: {id: userId},
            success: function (data) {
                if (data === 0) {
                    alert('购物车为空，无可展示内容！');
                }
            },
            error: function () {
                alert('检查购物车时出现错误，请稍后重试！');
            }
        });
    }


/*支付平台占比饼状图*/
$(function() {
var pieChart = echarts.init(document.getElementById("userAddressPie"));
var pieoption = {
title: {
text: '',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
                x: 'left',
                data: ['游戏平台', '视频娱乐', '门户媒体', '电商平台']
            },
            calculable: true,
            series: [{
                name: '支付平台',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [{
                    value: 335,
                    name: '游戏平台'
                }, {
                    value: 310,
                    name: '视频娱乐'
                }, {
                    value: 234,
                    name: '门户媒体'
                }, {
                    value: 135,
                    name: '电商平台'
                }]
            }]
        };
        pieChart.setOption(pieoption);
    })

    /* 折线图 */
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('lineChart'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '',
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['用户访问趋势']
        },
        toolbox: {
            show: true,

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 次'
            }
        },
        series: [

            {
                name: '用户访问趋势',
                type: 'line',
                areaStyle: {
                    normal: {}
                },
                data: [100, 200, 250, 255, 300, 200, 260],
                markPoint: {
                    data: [{
                        name: '周最低',
                        value: -2,
                        xAxis: 1,
                        yAxis: -1.5
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    },
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                normal: {
                                    position: 'start',
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
